<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" style="width: 100%" :width="width" :height="height" :option="option" />
    <div v-if="!isShowEcharts" class="empty-wrapper">
      <px-empty :image-size="100" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch, computed } from "vue";
import echartsDom from "@/views/water/spc/components/echartsDom.vue";
const bian = ref("双边");
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  // pointUnit: {
  //   type: String,
  //   default: ""
  // },
  height: {
    type: String,
    default: ""
  },
  tabvalue: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  // startValue: {
  //   type: Number,
  //   default: 0
  // },
  // name: {
  //   type: String,
  //   default: ""
  // },
  // step: {
  //   type: Number,
  //   default: 0
  // },
  // usl: {
  //   type: Number,
  //   default: 0
  // },
  // ucl: {
  //   type: Number,
  //   default: 0
  // },
  // uwl: {
  //   type: Number,
  //   default: 0
  // },
  // target: {
  //   type: Number,
  //   default: 0
  // },
  // lwl: {
  //   type: Number,
  //   default: 0
  // },
  // lcl: {
  //   type: Number,
  //   default: 0
  // },
  // lsl: {
  //   type: Number,
  //   default: 0
  // },
  SpcAnalysis: {
    type: Object,
    required: true
  }
});

const isShowEcharts = computed(() => {
  if (props.SpcAnalysis && props.SpcAnalysis.length) {
    let time = props.SpcAnalysis.filter(v => v.pointValues && v.pointValues.length);
    if (time && time.length) {
      return true;
    }
  }
  return false;
});
const state = reactive({
  option: {},
  chartsList: [],
  pointUnit: "",
  name: "",
  series: [],
  yAxis: []
});
const { option, chartsList, pointUnit, series, yAxis } = toRefs(state);
function formatDate(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}
console.log(props);

watch(
  () => props.SpcAnalysis,
  newOption => {
    if (newOption.length > 0) {
      // chartsList.value = newOption;
      console.log(newOption);
      if (newOption[0].pointValues != null) {
        let chartsvalue = newOption.filter(item => item.point === props.tabvalue);
        chartsList.value = chartsvalue[0]?.pointValues || {};
        yAxis.value = newOption.map((item, index) => {
          if (item.pointValues != []) {
            if (index == 0) {
              return {
                type: "value",
                name: item.indicatorName,
                nameLocation: "middle", //居中
                nameGap: 70, //轴线距离
                nameRotate: 90, //字体选择角度
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: "solid"
                  }
                },
                min: item.startValue,
                max: item.endValue ? item.endValue : item.uslValue
              };
            } else if (index == 1) {
              return {
                type: "value",
                name: item.indicatorName,
                nameLocation: "middle", //居中
                // show: false,
                nameGap: 70, //轴线距离
                nameRotate: 90, //字体选择角度
                axisLine: {
                  show: false,
                  lineStyle: {
                    type: "solid"
                  }
                },
                min: item.startValue,
                max: item.endValue ? item.endValue : item.uslValue
              };
            } else {
              return {
                type: "value",
                name: item.indicatorName,
                position: "right",
                // show: false,
                offset: 70 * (index - 1),
                nameLocation: "middle", //居中
                nameGap: 70, //轴线距离
                nameRotate: 90, //字体选择角度
                axisLine: {
                  show: false,
                  lineStyle: {
                    type: "solid"
                  }
                },
                min: item.startValue,
                max: item.endValue ? item.endValue : item.uslValue
              };
            }
          }
        });
        series.value = newOption.map((item, index) => {
          if (index > 0) {
            return {
              data: item.pointValues.length > 0 ? item.pointValues.map(item => item.value) : [],
              type: "line",
              name: item.indicatorName,
              yAxisIndex: index,
              connectNulls: true
            };
          } else {
            return {
              data: item.pointValues.length > 0 ? item.pointValues.map(item => item.value) : [],
              type: "line",
              name: item.indicatorName,
              connectNulls: true
            };
          }
        });
        series.value[0].markLine = {
          symbol: "none",
          data: [
            {
              name: "USL值",
              yAxis: Number(chartsvalue[0]?.uslValue),
              lineStyle: {
                color: "#A600FF",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "insideEndTop",
                formatter: `USL值${chartsvalue[0]?.uslValue}`,
                color: "#A600FF",
                fontWeight: 600
              }
            },
            {
              name: "UCL值",
              yAxis: Number(chartsvalue[0]?.uclValue),
              lineStyle: {
                color: "#FF0000",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "insideEndTop",
                formatter: `UCL值${chartsvalue[0]?.uclValue}`,
                color: "#FF0000",
                fontWeight: 600
              }
            },
            {
              name: "UWL值",
              yAxis: Number(chartsvalue[0]?.uwlValue),
              lineStyle: {
                color: "#FF9900",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "insideEndTop",
                formatter: `UWL值${chartsvalue[0]?.uwlValue}`,
                color: "#FF9900",
                fontWeight: 600
              }
            },
            {
              name: "Target值",
              yAxis: Number(chartsvalue[0]?.targetValue),
              lineStyle: {
                color: "#00E272",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "insideEndTop",
                formatter: `Target值${chartsvalue[0]?.targetValue}`,
                color: "#00E272",
                fontWeight: 600
              }
            },
            {
              name: "LWL值",
              yAxis: Number(chartsvalue[0]?.lwlValue),
              lineStyle: {
                color: "#FF9900",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "insideEndTop",
                formatter: `LWL值${chartsvalue[0]?.lwlValue}`,
                color: "#FF9900",
                fontWeight: 600
              }
            },
            {
              name: "LCL值",
              yAxis: Number(chartsvalue[0]?.lclValue),
              lineStyle: {
                color: "#FF0000",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "insideEndTop",
                formatter: `LCL值${chartsvalue[0]?.lclValue}`,
                color: "#FF0000",
                fontWeight: 600
              }
            },
            {
              name: "LSL值",
              yAxis: Number(chartsvalue[0]?.lslValue),
              lineStyle: {
                color: "#A600FF",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "insideEndTop",
                formatter: `LSL值${chartsvalue[0]?.lslValue}`,
                color: "#A600FF",
                fontWeight: 600
              }
            }
          ]
        };
        console.log(series.value);
        setdata();
      }
    } else {
      chartsList.value = [];
    }
    console.log(newOption);
  }
);
watch(
  () => props.tabvalue,
  newOption => {
    if (newOption.length > 0) {
      // chartsList.value = newOption;
      cleardata();
      if (props.SpcAnalysis[0].pointValues != null) {
        let chartsvalue = props.SpcAnalysis.filter(item => {
          return item.point === newOption;
        });

        yAxis.value = props.SpcAnalysis.map((item, index) => {
          if (item.pointValues != []) {
            if (index == 0) {
              return {
                type: "value",
                name: item.indicatorName,
                nameLocation: "middle", //居中
                nameGap: 70, //轴线距离
                nameRotate: 90, //字体选择角度
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: "solid"
                  }
                },
                min: item.startValue,
                max: item.endValue ? item.endValue : item.uslValue
              };
            } else if (index == 1) {
              return {
                type: "value",
                name: item.indicatorName,
                nameLocation: "middle", //居中
                nameGap: 70, //轴线距离
                nameRotate: 90, //字体选择角度
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: "solid"
                  }
                },
                min: item.startValue,
                max: item.endValue ? item.endValue : item.uslValue
              };
            } else {
              return {
                type: "value",
                name: item.indicatorName,
                position: "right",
                offset: 70 * (index - 1),
                nameLocation: "middle", //居中
                nameGap: 70, //轴线距离
                nameRotate: 90, //字体选择角度
                axisLine: {
                  show: true,
                  lineStyle: {
                    type: "solid"
                  }
                },
                min: item.startValue,
                max: item.endValue ? item.endValue : item.uslValue
              };
            }
          }
        });
        series.value[0].markLine = {
          symbol: "none",
          data: [
            {
              name: "USL值",
              yAxis: Number(chartsvalue[0]?.uslValue),
              lineStyle: {
                color: "#A600FF",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "insideEndTop",
                formatter: `USL值${chartsvalue[0]?.uslValue}`,
                color: "#A600FF"
              }
            },
            {
              name: "UCL值",
              yAxis: Number(chartsvalue[0]?.uclValue),
              lineStyle: {
                color: "#FF0000",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "insideEndTop",
                formatter: `UCL值${chartsvalue[0]?.uclValue}`,
                color: "#FF0000"
              }
            },
            {
              name: "UWL值",
              yAxis: Number(chartsvalue[0]?.uwlValue),
              lineStyle: {
                color: "#FF9900",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "insideEndTop",
                formatter: `UWL值${chartsvalue[0]?.uwlValue}`,
                color: "#FF9900"
              }
            },
            {
              name: "Target值",
              yAxis: Number(chartsvalue[0]?.targetValue),
              lineStyle: {
                color: "#00E272",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "insideEndTop",
                formatter: `Target值${chartsvalue[0]?.targetValue}`,
                color: "#00E272"
              }
            },
            {
              name: "LWL值",
              yAxis: Number(chartsvalue[0]?.lwlValue),
              lineStyle: {
                color: "#FF9900",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "insideEndTop",
                formatter: `LWL值${chartsvalue[0]?.lwlValue}`,
                color: "#FF9900"
              }
            },
            {
              name: "LCL值",
              yAxis: Number(chartsvalue[0]?.lclValue),
              lineStyle: {
                color: "#FF0000",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "insideEndTop",
                formatter: `LCL值${chartsvalue[0]?.lclValue}`,
                color: "#FF0000"
              }
            },
            {
              name: "LSL值",
              yAxis: Number(chartsvalue[0]?.lslValue),
              lineStyle: {
                color: "#A600FF",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "insideEndTop",
                formatter: `LSL值${chartsvalue[0]?.lslValue}`,
                color: "#A600FF"
              }
            }
          ]
        };
        cleardata();
        setdata();
      }
    } else {
      chartsList.value = [];
    }
  }
);
const cleardata = () => {
  option.value = {};
};
const setdata = () => {
  option.value = {
    // color: [props.color],
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {
          title: "点击保存为图片"
        }
      }
    },
    grid: {
      left: "5%",
      top: "60px",
      right: `${yAxis.value.length * 3}%`,
      bottom: "10px",
      containLabel: true
    },
    legend: {
      type: "scroll",
      width: "50%"
    },
    tooltip: {
      trigger: "axis",
      confine: true
    },
    xAxis: {
      type: "category",
      boundarGap: false,
      axisLabel: {
        align: "left"
      },
      data: chartsList.value.length > 0 ? chartsList.value.map(item => formatDate(item.time)) : ["11:00", "12:00", "13:00", "14:00", "15:00", "16:00"]
    },
    yAxis: yAxis.value,
    // {
    //   name: pointUnit.value,
    //   type: "value"
    //   // max: maxNum,
    //   // min: props.startValue || 0
    //   // interval: props.step
    // },
    series: series.value
  };
};

// setdata();
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;

  .empty-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}

.numList {
  float: left;
  width: 10%;
  height: 100%;
  margin-top: 20px;

  .numListDiv {
    width: 100%;
    height: 23px;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 23px;
    background: #eff6ff;

    .numListDivnum {
      float: left;
      width: calc(50% - 4px);
      height: 20px;
    }

    .txright {
      text-align: right;
    }
  }
}

.heighttwo {
  height: 46px !important;
}

.color2 {
  color: #a6a6a6 !important;
}
</style>
